<template>
  <div>
    <div style="display: flex; margin-top: 10px">
      <div style="width: 200px;">
        <div class="category-item" v-for="item in state.category">{{ item.name }}</div>
      </div>

      <!--  v-if 解决轮播图首次无法加载图片的情况，原理：等待后台数据完全返回再创建 el-carousel组件，避免一开始空数组无法渲染图片 -->
      <div style="flex: 1">
        <el-carousel height="270px" v-if="state.adArr.length">
          <el-carousel-item v-for="item in state.adArr" :key="item.id">
            <img :src="item.img" style="width: 100%">
          </el-carousel-item>
        </el-carousel>
      </div>

      <div style="width: 300px">

      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive} from 'vue'
import request from "../utils/request";

const state = reactive({
  adArr: [],
  category: []
})


const load = () => {
  request.get("/loopAd").then(res => {
    state.adArr = res.data
  })
  request.get("/category/home").then(res => {
    state.category = res.data
  })
}

load()

</script>

<style>
.category-item {
  padding: 10px 0;
  text-align: center;
}
</style>
